<template>
    <horizon-scroll-list class="chart-tabs" :data="items">
        <div
            slot="item"
            slot-scope="{item}"
            class="chart-tabs__item"
            :class="{'is-active': item.value === value}"
            @click="handleItemClick(item)"
        >{{item.text}}</div>
    </horizon-scroll-list>
</template>
<script>
import HorizonScrollList from '@/components/horizon-scroll-list'

export default {
    name: 'ChartTabs',
    components: {
        HorizonScrollList
    },
    props: {
        value: {
            type: [Number, String]
        },
        items: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        handleItemClick (item) {
            this.$emit('item-click', {
                item
            })
        }
    }
}
</script>
<style>
.chart-tabs{
    line-height: 1;
}
.chart-tabs__item{
    border: 1px solid #66B6FF;
    line-height: 20px;
    padding: 2px 9px;
    cursor: pointer;
    margin-right: 12px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    color: #66B6FF;
    margin-top: 4px;
}
.chart-tabs__item:last-child{
    margin-right: 0;
}
.chart-tabs__item.is-active{
    background-color: #66B6FF;
    color: #fff;
    border-color: #66B6FF;
    position: relative;
    z-index: 3;
}
</style>